<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm" size="medium">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="form.birthday" @change="handleBirthdayToage" type="date" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日"
              placeholder="出生日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="年龄" prop="age">
            <el-input
              v-model="form.age"
              placeholder="请输入年龄"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" clearable placeholder="请选择老人性别">
              <el-option
                v-for="(item, index) in options"
                :key="item.index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="联系方式" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入老人联系方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="残疾证号" prop="card">
            <el-input v-model="form.card" @change="handleChangeCard" placeholder="请输入残疾证号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入家庭地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="登记日期" prop="in_time">
            <el-date-picker v-model="form.in_time" type="date" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日"
              placeholder="登记日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="残疾证号" prop="canjicard">
            <el-input v-model="form.canjicard" placeholder="请输入残疾证号"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="残疾类别" prop="type">
            <el-select v-model="form.type" clearable placeholder="请选择残疾类别">
              <el-option
                v-for="(item, index) in typelist"
                :key="item.index"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="残疾等级" prop="level">
            <el-select v-model="form.level" clearable placeholder="请选择残疾等级">
              <el-option
                v-for="(item, index) in levellist"
                :key="item.index"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="获取经纬度" prop="lat">
            <el-row>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-input
                  v-model="form.lng"
                  placeholder="请获取经纬度"
                  :disabled="true"
                ></el-input>
              </el-col>
              <el-col
                :xs="1"
                :sm="1"
                :md="1"
                :lg="1"
                :xl="1"
                style="text-align: center"
              >
                --
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-input
                  v-model="form.lat"
                  placeholder="请获取经纬度"
                  :disabled="true"
                ></el-input>
              </el-col>
              <el-col
                :xs="1"
                :sm="1"
                :md="1"
                :lg="1"
                :xl="1"
                style="text-align: center"
              >
                -
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-button size="medium" type="primary" @click="handleMap">
                  获取经纬度
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="老人照片" prop="avatar">
             <el-row>
               <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
               <div @click="handleResultAvatar">
                  <img-upload
                   v-model="form.profile"
                   tips="老人照片"
                   method="profile"
                   :imgurl="profile_img"
                   :updisabled="upDisabled"
                   @result="resultAvatar"
                 ></img-upload>
               </div>
               </el-col>
             </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-footer" style="padding-left: 100px;">
      <el-button type="primary" class="sureBtn" size="small" @click="save">
        提 交
      </el-button>
      <el-button type="info" class="setBtn" size="small" @click="cancle">
        取 消
      </el-button>
    </div>
  </div>
</template>
<script>
  import { getcanjielder,uploadImg, getidcardapi } from "@/api/oldermanager";
  import imgUpload from "@/components/AppUpload/index";
  import { getBirthdayage, getCarddetail } from "@/utils";
  export default {
    components: {
      imgUpload
    },
    props: {
      e_id:{
        type: Number,
        default(){
          return 0
        }
      },
      datas: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    watch: {
      datas: {
        //监听的对象
        deep: true, //深度监听设置为 true
        handler: function (newV, oldV) {
          if (JSON.stringify(newV) != "{}") {
            if(newV.base && newV.base.lng) {
              this.$set(this.form, "lng", newV.base.lng);
              this.$set(this.form, "address", newV.base.address);
              this.$set(this.form, "lat", newV.base.lat);
            } else {
              this.form = newV;
            }
          }
        },
      },
    },
    data() {
      return {
        form: {},
        options: [
          {
            label: "男",
            value: 1
          },
          {
            label: "女",
            value: 2
          }
        ],
        typelist: [
          {
            label: "智力",
          },
          {
            label: "肢体",
          },
          {
            label: "精神",
          }
        ],
        levellist: [
          {
            label: "1级",
          },
          {
            label: "2级",
          },
          {
            label: "3级",
          },
          {
            label: "4级",
          }
        ],
        rules: {
          name: [{
            required: true,
            message: "请输入老人姓名",
            trigger: "blur"
          }],
          birthday: [{
            required: true,
            message: "请选择出生日期",
            trigger: "blur"
          }],
          age: [{
            required: true,
            message: "请输入年龄",
            trigger: "blur"
          }],
          sex: [{
            required: true,
            message: "请选择老人性别",
            trigger: "blur"
          }],
          mobile: [{
            required: true,
            message: "请输入联系方式",
            trigger: "blur"
          }],
          card: [{
            required: true,
            message: "请输入残疾证号",
            trigger: "blur"
          }],
          address: [{
            required: true,
            message: "请输入家庭住址",
            trigger: "blur"
          }]
        },
        profile_img: "",
        methodType: "profile",
        upDisabled: false,
      }
    },
    mounted() {
      this.form = this.datas;
    },
    methods: {
      //根据身份证号添些年龄等
      handleChangeCard(value) {
        const userInfo = getCarddetail(value);
        this.form.canjicard = value;
        if (userInfo) {
          this.$set(this.form, "birthday", userInfo.birthday);
          this.$set(this.form, "age", userInfo.age);
          this.$set(this.form, "sex", userInfo.sex);
        }
      },
      handleBirthdayToage(value) {
        const age = getBirthdayage(value);
        this.$set(this.form, "age", age);
      },
      save() {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            if(this.form.id) {
              getcanjielder("put", this.form).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "编辑成功",
                  });
                  this.cancle();
                }
              });
            } else {
              getcanjielder("post", Object.assign(this.form, {
                id: this.e_id
              })).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancle();
                }
              });
            }
          }
        });
      },
      cancle() {
        this.$emit("cancle")
        this.form = {}
      },
      handleMap() {
        if (!this.form.address || this.form.address == "") {
          this.$message({
            type: "warning",
            message: "请先填写详细地址",
          });
          return false;
        }
        this.$emit("handleMap", this.form.address);
      },
      //上传图片
      async funUpdataBase64() {},
      handleResultAvatar() {
        //console.log(this.camPlugins.obj)
        this.methodType = "profile";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "profile";
        // }
      },
      resultAvatar(data) {
        this.$set(this.form, "profile_id", data.id);
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep  {
    .el-input{
       width: 100%;
    }
    .el-select{
      width: 100%;
    }
  }
</style>
